import React, { memo, useEffect } from "react";
import { useLocation, useParams } from "react-router-dom";
import { SearchPageContainer } from "./style";
import FilterArea from "@/components/filter/FilterArea";
import { ProductList } from "@/components/productList";
import { fetchProductSearch } from "@/store/productSearch";
import { useDispatch } from "react-redux";
import { useSelector } from "@/store/hooks";
import { Spin } from "antd";
type MatchParams = {
  keywords: string;
};
const SearchPage = memo(() => {
  const location = useLocation();
  const dispatch = useDispatch();
  const { searchData, loading, pagination } = useSelector((state) => ({
    searchData: state.Search.searchData,
    loading: state.Search.loading,
    pagination: state.Search.pagination,
  }));
  const { keywords } = useParams<MatchParams>();
  useEffect(() => {
    if (keywords) {
      dispatch<any>(
        fetchProductSearch({ nextPage: 1, pageSize: 10, keywords: keywords }),
      );
    } else {
      dispatch<any>(fetchProductSearch({ nextPage: 1, pageSize: 10 }));
    }
  }, [location]);
  const onPageChange = (nextPage, pageSize) => {
    dispatch<any>(fetchProductSearch({ nextPage, pageSize, keywords }));
  };
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%",
        }}
      />
    );
  }
  return (
    <SearchPageContainer>
      <div className="page-content ">
        {/* 分类过滤器 */}
        <FilterArea></FilterArea>
      </div>
      {/* 产品列表  */}
      <div className="product-list-container">
        <ProductList
          data={searchData}
          paging={pagination}
          onPageChange={onPageChange}
        ></ProductList>
      </div>
    </SearchPageContainer>
  );
});

export default SearchPage;
